<template>
    <div class="home">
        <!-- 轮播图 -->
        <div class="auto-play">
        <mt-swipe :auto="2000">
           <mt-swipe-item class="one-play">
               <img src="../images/r6.png">
           </mt-swipe-item>
           <mt-swipe-item class="two-play">
               <img src="../images/r7.png">
           </mt-swipe-item>
           <mt-swipe-item class="three-play">
               <img src="../images/nav09.png">
           </mt-swipe-item>
        </mt-swipe>
        </div>
        <!-- //九宫格布局 -->
        <div class="grad-6">
            <div class="item-one">
                <img src="../images/nav04.png" alt="">
                <p>鲜果</p>
            </div>
            <div class="item-one">
                <img src="../images/nav05.png" alt="">
                <p>速递</p>
            </div>
            <div class="item-one">
                <img src="../images/nav06.png" alt="">
                <p>充值</p>
            </div>
            <div class="item-one">
                <img src="../images/nav07.png" alt="">
                <p>白条</p>
            </div>
            <div class="item-one">
                <img src="../images/nav08.png" alt="">
                <p>领券</p>
            </div>
            <div class="item-one">
                <img src="../images/nav09.png" alt="">
                <p>快递</p>
            </div>
        </div>
        <!-- 特点切换 -->
        <div class="home-sticy">
        <home-tab :title="title" :listImg="listImg"></home-tab>
        <!-- 根据不同的类型显示不同数据 -->

        </div>
           <ul class="lazy-images">
              <li>
                <img src="../images/r6.png">
              </li>
              <li>
                <img src="../images/r6.png">
              </li>
              <li>
                <img src="../images/r6.png">
              </li>
            </ul>
    </div>
</template>
<script>
import homeTab from '../components/homeTab'
export default {
    name:"Home",
    data(){
        return{
            title:['女裙','男装','皮靴','上衣'],
            list:[
                {item:'../images/孙燕姿4.jpg'},
                {item:"../images/r10.png"},
                {item:"../images/r6.png"}
            ],
            listImg:{
               'nvq':{ name:'dd',pro:'hhhhhs',id:1,imgaddr:['/static/img/r6.6b7f2e2.png',],price:'2323'},
               "nanz":{ name:'dd',pro:'hhhhhs',id:2,imgaddr:['/static/img/r6.6b7f2e2.png',],price:'2323'},
            //    'pixie':{name:'dd',pro:'hhhhhs',id:3,imgaddr:['../images/nav06.png',],price:'2323'},
               'pixie':{name:'dd',pro:'hhhhhs',id:3,imgaddr:['/assets/img/r6.6b7f2e2.png',],price:'2323'},
            //    'pixie':{name:'dd',pro:'hhhhhs',id:3,imgaddr:['/assets/logo.png',],price:'2323'},
               'tixie':{name:'dd',pro:'hhhhhs',id:4,imgaddr:['/assets/img/nav06.png',],price:'2323'}
            }
        }
    },
    components:{
        homeTab
    },
    //改变页面标题
    created(){
        document.title="首页";
    }

}
</script>
<style scoped>

    .home{
        margin-top:40px;
        height:100%;
        overflow: hidden;
    }
    .home .home-sticy{
        position:sticky;
        top:49px;
    }
    .one-play{
        background:#f10ec0;
    }
    .two-play{
        background:lime;
    }
    .three-play{
        background:#0be1e9;
    }
     .lazy-images li{
         border:1px solid #0be1e9;
        height: 300px;
    }
     .lazy-images li img[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
    .auto-play{
        height: 300px;
    }
.grad-6{
    text-align:center;
    width: 100%;  
    display:flex;
    flex-wrap: wrap;
}
.grad-6 .item-one{
    width: 33.33%;
    padding:10px;
    /* border:1px solid red; */
   
}
.grad-6 .item-one p{
    margin-top:10px;
    color:#f10ec0;
    font-size:20px;
    font-weight:700;
}
</style>